<template>
  <div class="number-box-wrap">
    <component :is="e" :size="size" :color="color" v-for="e in numList" style="margin: 5px;"/>
  </div>
</template>

<script>
import zero from './NumberZero.vue'
import one from './NumberOne.vue'
import two from './NumberTwo.vue'
import three from './NumberThree.vue'
import four from './NumberFour.vue'
import five from './NumberFive.vue'
import six from './NumberSix.vue'
import seven from './NumberSeven.vue'
import eight from './NumberEight.vue'
import nine from './NumberNine.vue'
import dot from './NumberDot.vue'
export default {
  name: 'NumberBox',
  components: {zero, one, two, three, four, five, six, seven, eight, nine, dot},
  props: {
    num: {
      type: String,
      default: ''
    },
    size: {
      type: Number,
      default: 10
    },
    color: {
      type: String,
      default: '#000'
    }
  },
  data() {
    return{
      numList: [],
      dict: [
        'zero', 'one','two','three','four','five','six','seven','eight','nine'
      ]
    }
  },
  methods: {
    numToNumList() {
      this.numList = []
      for (let i = 0; i < this.num.length; i++) {
        let key = 'dot'
        if (this.isNumber(this.num[i])) {
          key = this.dict[this.num[i]]
        }
        this.numList.push(key)
      }
    },
    isNumber(val) {
      return !isNaN(parseFloat(val)) && isFinite(val)
    }
  },
  watch: {
    num() {
      this.numToNumList()
    }
  },
  mounted() {
    this.numToNumList()
  }
}
</script>

<style scoped>
.number-box-wrap{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
}
</style>
